<template>
  <div>
    <!-- 头部 -->
    <market-header></market-header>
    <!-- main -->
    <div class="container">
      <!-- 上传商品图片 -->
      <div class="left">
        <el-upload class="upload-demo"
                   action="http://localhost:3000/users/upload"
                   :data="data"
                   :before-upload="beforeUpload"
                   :on-success="success"
                   :on-remove="remove"
                   :file-list="fileList"
                   list-type="picture"
                   :limit="5"
                   :on-exceed="onExceed">
          <el-button size="small"
                     type="primary">点击上传</el-button>
          <div slot="tip"
               class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
        </el-upload>

      </div>
      <!-- 填写商品具体信息 -->
      <div class="right">
        <div class="input">
          <label>商品信息</label>
          <rh-input v-model="goodsName"
                    placeholder="请输入商品信息"></rh-input>
        </div>
        <div class="input">
          <label>商品使用情况</label>
          <rh-input v-model="goodsInfo"
                    placeholder="请输入商品使用情况"></rh-input>
        </div>
        <div class="input">
          <label>商品所在学校</label>
          <rh-input v-model="goodsLocation"
                    placeholder="请输入学校"></rh-input>
        </div>
        <div class="input">
          <label>商品购买时间</label>
          <rh-input v-model="goodsTime"
                    placeholder="请输入购买时间"></rh-input>
        </div>
        <div class="input">
          <label>商品剩余数量</label>
          <el-input-number v-model="goodsAmount"
                           :min="1"
                           :max="10000"></el-input-number>
        </div>
        <div class="input">
          <label>商品原始价格</label>
          <rh-input v-model="goodsOrigin"
                    placeholder="请输入原始价格"></rh-input>
        </div>
        <div class="input">
          <label>商品出售价格</label>
          <rh-input v-model="goodsPrice"
                    placeholder="请输入出售价格"></rh-input>
        </div>
        <div class="input">
          <label>商品分类</label>
          <rh-select v-model="value"
                     placeholder="请选择"
                     :options="options"></rh-select>
        </div>
        <div class="input">
          <label>是否支持退货</label>
          <rh-select v-model="isReturn"
                     placeholder="请选择"
                     :options="options2"></rh-select>
        </div>
        <div class="input">
          <rh-button @click="editGoods">提交</rh-button>
        </div>
      </div>
    </div>
    <!-- 底部 -->
    <market-footer></market-footer>
  </div>
</template>

<script>
import MarketHeader from "@/components/common/MarketHeader"
import MarketFooter from "@/components/common/MarketFooter"
import RhInput from '@/components/basic/rh-input'
import RhSelect from '@/components/basic/rh-select'
import RhButton from '@/components/basic/rh-button'
import RhUpload from '@/components/basic/rh-upload/rh-upload'
import $ from "jquery"
export default {
  components: {
    MarketHeader,
    MarketFooter,
    RhInput,
    RhSelect,
    RhButton,
    RhUpload
  },
  data () {
    return {
      fileList: [],
      objList: [],
      goodsName: '',
      goodsInfo: '',
      goodsLocation: '',
      goodsPrice: '',
      goodsOrigin: '',
      goodsTime: '',
      goodsAmount: '',
      options: [
        {
          value: '生活用品',
          label: '生活用品'
        },
        {
          value: '学习用品',
          label: '学习用品'
        },
        {
          value: '数码产品',
          label: '数码产品'
        },
        {
          value: '体育产品',
          label: '体育产品'
        },
        {
          value: '其他',
          label: '其他'
        }
      ],
      value: '',
      options2: [
        {
          value: '是',
          label: '是'
        },
        {
          value: '否',
          label: '否'
        }
      ],
      isReturn: '',
      data: {},
      goodsImages: ''
    }
  },
  created () {
    this.username = localStorage.getItem("username");
    this.$http.post('http://localhost:3000/goodsInfo', { id: this.$route.query.id }).then(response => {
      this.goodsName = response.data.data.goodsName; //信息
      this.goodsInfo = response.data.data.goodsInfo; // 使用情况
      this.goodsLocation = response.data.data.goodsLocation; // 所在地
      this.goodsPrice = response.data.data.goodsPrice; //价格
      this.goodsOrigin = response.data.data.goodsOrigin; // 原始价格
      this.goodsTime = response.data.data.goodsTime; // 添加时间
      this.goodsAmount = response.data.data.goodsAmount; // 剩余数量
      this.value = response.data.data.goodsClassify; // 分类
      this.isReturn = (response.data.data.goodsReturn == true) ? "是" : "否"; // 是否支持退货
      this.goodsImages = response.data.data.goodsImages; // 获取商品的图片
      this.fileList = this.goodsImages;
      this.objList = this.goodsImages;
    })
  },
  methods: {
    success (response, file, fileList) {
      this.fileList = fileList;
      // 存储图片数组
      let obj = {
        id: file.uid,
        name: file.name,
        url: `http://localhost:3000${response.img.file.path.slice(6)}`
      };
      this.objList.push(obj);
    },
    remove (file, fileList) {
      this.fileList = fileList;
      // 删除对应的图片链接
      let index = this.objList.findIndex(item => item.id == file.uid);
      this.objList.splice(index, 1);
    },
    editGoods () {
      const goods = {
        goodsName: this.goodsName,
        goodsInfo: this.goodsInfo,
        goodsLocation: this.goodsLocation,
        goodsPrice: this.goodsPrice,
        goodsOrigin: this.goodsOrigin,
        goodsImages: this.objList,
        goodsClassify: this.value,
        goodsTime: this.goodsTime,
        goodsAmount: this.goodsAmount,
        goodsReturn: this.isReturn,
        goodsId: this.$route.query.id
      }
      this.$http.post('http://localhost:3000/users/editGoods', goods).then(response => {
        if (response.data.status == 1) {
          alert(response.data.message);
        } else {
          alert(response.data.message);
          this.$router.go(-1);
        }
      })
    },
    beforeUpload () {
      let $imgFile = $(".el-upload__input").get(0);
      this.data = { "upload": $imgFile.files[0] };
    },
    onExceed () {
      alert("最多只能上传5张图片");
    }
  }
}
</script>

<style lang="less" scoped>
.container {
  width: 1000px;
  margin: 100px auto;
  border: 1px solid #ccc;
  box-sizing: border-box;
  padding: 30px;
  height: 700px;
  display: flex;
  justify-content: space-between;

  .left {
    width: 420px;
    border: 1px solid #ccc;
  }
  .right {
    border: 1px solid #ccc;
    padding: 5px;

    .input {
      margin-bottom: 22px;
    }
    .rh-input {
      margin-left: 120px;
      width: 330px;
    }
    .rh-select,
    .rh-button {
      margin-left: 120px;
    }
    label {
      width: 120px;
      height: 40px;
      text-align: right;
      vertical-align: middle;
      float: left;
      font-size: 14px;
      color: #606266;
      line-height: 40px;
      padding: 0 12px 0 0;
      box-sizing: border-box;
    }
  }
  img {
    width: 420px;
    height: 420px;
  }
  .el-input {
    width: 330px;
  }
}
</style>